﻿body {
     background: url("../images/body-bg.png") 0px 0px repeat transparent;  
}
iframe
{
    display:block;
    width:100%;
}

/*=============APPS Viewer===============*/
.apps_viewer
{
    height:100%;
}
.wrapper{
    height:100%;
    position:relative;
    opacity:0;
}
/*------------West - Left-----------*/
.apps_viewer .ui-layout-west
{
   overflow:auto;
}
.apps_viewer #LEFT
{
    /*
	
	background-color:rgba(255,255,255,0.3);    
    height:calc(100% - 20px);
    margin:0 0px 0 5px;
    padding:10px;

    box-shadow: rgba(36,143,170,0.5) 0px 0px 10px;
    */
	
	/* Temp. */
	/*
	background-color:rgba(130,130,130,0.3);    
    height:calc(100% - 20px);
    margin:0 0px 0 5px;
    padding:10px;

    box-shadow: rgba(55,55,55,0.5) 0px 0px 10px;	
	*/
	
	background-image: url("../images/bg_gray03.png"); 

	
	
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 5px;
	margin-bottom: 0px;
	/* padding:10px; */
	
	padding-bottom: 1px;
	padding-left: 5px;
	padding-right: 15px;
	/* padding-top: 10px; */
	
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px; 
	border:3px solid #6c6f70;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	/* box-shadow:     0px 0px 0px 0px #FFF, 0 0 15px 15px rgba(130, 130, 130, 0.1); */
	box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.4); 
	position:relative;
	height:calc(100% - 25px);
	overflow:auto;
	
}
/*------------West - Right-----------*/
.apps_viewer .ui-layout-east
{
   
}
.apps_viewer #RIGHT
{
    /* background-color:rgba(255,255,255,0.3);    */
    height:calc(100% - 20px);
    margin:0 5px 0 0px;
    padding:10px;
    box-shadow: rgba(36,143,170,0.3) 0px 0px 10px;
}
/*------------Center - Center-----------*/

.apps_viewer .ui-layout-center {
    height: calc(100% - 100px);
    width: calc(50% - 20px);
    padding: 10px;
    	/* 
	background-color: #388CA5;
    box-shadow: rgba(56,140,165,0.8) 0px 0px 150px inset;
	*/

    float: left;
}
.apps_viewer #CENTER
{
    height:100%;
    width:calc(100%);
}
.apps_viewer #CENTER iframe
{
    width:100%;
    height:100%;
    display:block;
}


/*-----------Tab Content---------*/
.tabs
{
    height:100%; 
}

.tabs ul.tab-title
{
    overflow:hidden;
    height: 23px;
}
.tabs ul.tab-title li
{
    float:left;
}
.tabs ul.tab-title li a {
    background: url(../images/tab_title-R.png) right -30px no-repeat transparent;
    display: inline-block;
    padding-right: 22px;
    height: 23px;
    color: #E3F4F9;
}
.tabs ul.tab-title li a span
{
   background: url(../images/tab_title-L.png) left -30px no-repeat transparent;
    display:block;
    line-height:24px;
    height:23px;
    padding:0px 2px 0px 12px;
}

.tabs ul.tab-title li a:hover,.tabs ul.tab-title li.ui-tabs-active a
{
    background-position: right 0px;
    color: #053E5A;
	 
}
.tabs ul.tab-title li a:hover span,.tabs ul.tab-title li.ui-tabs-active a span
{
    background-position:left  0px;
}
.tabs .tab-content
{
    background-color:rgba(255,255,255,0.4);
    width:100%;
    height:calc(100% - 43px);
    box-shadow: rgba(36,143,170,0.4) 0px 10px 10px;
    border-radius:0 5px 5px 5px;
}
.tabs .tab-content .inner
{
    margin:10px;
    height: calc(100% - 20px);
    width:calc(100% - 20px);
    display:inline-block;
    border-radius:3px;
    box-shadow: rgba(36,143,170,0.4) 0px 0px 10px;
}
.tabs .ui-tabs .ui-state-disabled
{
    display: none; /* disabled tabs don't show up */
}
.tabs .ui-tabs-panel
{
    width:100%;
    height:100%;
}
.tabs iframe
{
    width:100%;
    height:calc(100% - 50px);

}



/*-----------Buttons------------*/
/*-----------Yellow-White Button--------*/
.button-content-YW {
    background: url(../images/bt-content-R.png) right 0px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #645500;
}
.button-content-YW span
{
    background: url(../images/bt-content-L.png) left 0px no-repeat transparent;
    display:block;
    line-height:31px;
    height:33px;
    padding:0px 0px 0px 33px;
}
.button-content-YW:hover
{
    background-position:right -40px;
    color:#000000;
}
.button-content-YW:hover span
{
    background-position:left -40px;
}
/*-----------Blue-White Button--------*/
.button-content-BW {
    background: url(../images/bt-content-R.png) right -80px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #134859;
}
.button-content-BW span
{
    background: url(../images/bt-content-L.png) left -80px no-repeat transparent;
    display:block;
    line-height:31px;
    height:33px;
    padding:0px 0px 0px 33px;
}
.button-content-BW:hover
{
    background-position:right -40px;
    color:#000000;
}
.button-content-BW:hover span
{
    background-position:left -40px;
}

/*-----------Blue-White Button--------*/
.button-content-WB {
    background: url(../images/bt-content-R.png) right -40px no-repeat transparent;
    display: inline-block;
    padding-right: 15px;
    height: 33px;
    color: #333333;
}
.button-content-WB span
{
    background: url(../images/bt-content-L.png) left -40px no-repeat transparent;
    display:block;
    line-height:31px;
    height:33px;
    padding:0px 0px 0px 33px;
}
.button-content-WB:hover
{
    background-position:right -80px;    
    color: #000000;
}
.button-content-WB:hover span
{
    background-position:left -80px;
}

/*-----------Sidebar White-Orange Button--------*/
.button2-WY
{
    background: url(../images/button2-R.png) right 0px no-repeat transparent;
    display:inline-block;    
    padding-right:12px;
    height:23px;
    color:#000000;
}
.button2-WY span
{
    background: url(../images/button2-L.png) left 0px no-repeat transparent;
    display:block;
    line-height:19px;
    height:23px;
    padding:0px 0px 0px 12px;
}
.button2-WY:hover 
{
    background-position:right -25px;
}
.button2-WY:hover span
{
    background-position:left -25px;
}

/*---------INPUT - Text-----------*/

.content input[type = "text"] {
    border-style: solid;
    border-width:1px;
    border-color: #FFFFFF #FFFFFF #9CD6E7 #FFFFFF;
    background-color1: #248FAA;
    background-color: #FFFFFF;
    border-radius: 3px;
    padding: 0 7px;
    padding-bottom: 0px;
    height: 20px;
    box-shadow: rgba(36,143,170,0.4) 0px 8px 25px inset;
    color: #000000;
    position: relative;
    display: inline-block;
}
.content input[type = "text"]:before
{
    content:"";
    width:100%;
    height:100%;
    box-shadow: rgba(11,44,51,0.2) 0px 10px 15px;
    position:absolute;
}

/*============Varscreen Layout=============*/
.varscreen {
    background-color: #E6E6E6;
    color: #ffffff;
    height: 100%;
}
.varscreen p
{
     color:#ffffff;
}
.varscreen #var_screen
{
    height: calc(100% - 50px);
}
 
.varscreen iframe
{
    width: 100%;
    height: 100%;
}
.varscreen .controls
{
    width:254px;
    margin:0 auto;
    height:50px;
    overflow:hidden;
}
.varscreen .controls a {
    display: block;
    margin-right: 15px;
    padding:3px 20px;
    background-color: #FFBE00;
    float: left;
    border-radius: 4px;
    color: #873D00;
}
.varscreen .controls a:hover {
    color: #043A4F;
    background-color: #FFFFFF;
}
.varscreen .controls a.reset {
    margin-right: 0px;
}



/*-----------Footer---------------*/
.footer
{
     position:absolute;
     bottom:0px;
     height:1px;
     width:100%;
     background: url(../images/footer-bg.png) 0px 0px repeat-x transparent;
}
.credits-cover {
    bottom: 0;
    z-index: 1;
    width: 100%;
    height:1px;
    position: absolute;
}
.credits {
    margin: 0 auto;
    width: 400px;
    height:35px;
    background: url(../images/credits-bg.png);
}
.footer {
}
.footer .copyright {
    float: left;
    width: 40%;
    padding-top:7px;
    padding-left:10px;
}
.footer .copyright p {
    color: #5C8EA6;
}
.footer .copyright a {
    color: #ffffff;
}
.footer .copyright a:hover {
    color: #33CCCC;
}
 
.footer .bottom-links {
    float: right;
    width: 40%;
    padding-top:7px;
    padding-right:10px;
}
.footer .bottom-links ul {
    float: right;
}
.footer .bottom-links ul li {
    float: left;
    padding-left: 30px;
}
.footer .bottom-links ul li a {
    color: #5C8EA6;
}
.footer .bottom-links ul li a:hover {
    color: #ffffff;
}
 
 